<template>
<div>
  <!--link  -->
  <!-- type属性是链接类型 是string类型 可选值:primary / success / warning / danger / info 默认值:default -->
  <h2>链接的基础用法</h2>
  <!-- target="_blank" ,浏览器总在一个新打开、未命名的窗口中载入目标文档 -->
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <!-- herf 原生href属性  string类型 -->
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
  <br>
  <br>
  <h2>链接的禁用状态</h2>
  <!-- 文字链接不可用状态 -->
  <el-link disabled>默认链接</el-link>
  <!-- disabled 是否禁用状态 类型boolean 默认值false -->
  <el-link type="primary" disabled>主要链接</el-link>
  <el-link type="success" disabled>成功链接</el-link>
  <el-link type="warning" disabled>警告链接</el-link>
  <el-link type="danger" disabled>危险链接</el-link>
  <el-link type="info" disabled>信息链接</el-link>
  <br>
  <br>
  <h2>文字链接的下划线</h2>
  <!-- 参数underline 说明:是否带下划线 类型boolean 默认值true -->
  <el-link :underline="false" type="danger">无下划线</el-link>
  <el-link type="success">有下划线</el-link>
  <br>
  <br>
  <h2>图标链接</h2>
  <!-- 带图标的链接可增强辨识度 -->
  <!-- icon 图标类名 string类型  -->
  <div>
  <el-link icon="el-icon-edit" type="primary">编辑</el-link>
  <!-- 去掉下划线 :underline="false"-->
  <el-link icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
  <el-link type="warning">警告<i class="el-icon-warning-outline"></i> </el-link>
  <el-link type="success">查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>

</div>
  
</template>

<script lang="ts">
import Vue from 'vue';
export default class Link extends Vue {}
</script>

<style scoped lang="less">
.el-link {
    margin-right: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

</style>